<template>
	<view>
		<!-- 头部 -->
		<yHeader :current='-1' :screenWidth="screenWidth" @Tabs="handleTabs"></yHeader>
		<!-- PC内容 -->
		<view v-if="screenWidth>480" class="bg-grey py-4">
			<view class="__inner">
				<!-- 商品信息 -->
				<view class="bg-white flex" style="width: 100%; ">
					<view class="m-4 flex " style="width: 100%;">
						<!-- 图 -->
						<view class="flex-shrink " style="width: 800rpx;">
							<!-- 主图 -->
							<view style="width: 800rpx; height: 800rpx;">
								<image v-if="GoodsDetail.Picture_URL!=void 0" style="width: 100%;height: 100%;"
									:src="Domain_IMG + GoodsDetail.Picture_URL" mode=""></image>
							</view>
							<!-- 轮播展示 -->
							<view class="flex mt-2"
								style="width: 800rpx; height: 144rpx;justify-content: space-evenly;">
								<view @click="handleSwiper(i)" v-for="(item,i) in GoodsDetail.Swiper" :key="i"
									style="cursor: pointer; width: 144rpx; height: 144rpx;"
									:class="picNum==i?'border-button border-'+ThemeColors:'border-dark border-button'">
									<image style="width: 100%;height: 100%;" :src="Domain_IMG+item.Picture_Url" mode="">
									</image>
								</view>
							</view>
						</view>
						<!-- 详情 -->
						<view class="ml-4" style="width: 100%;">
							<view class="border-bottom box border-grey" style="height: 200rpx;">
								<view class="flex align-end" style="height: 50%;">
									<!-- <text class="h3 font-weight-bold">【秋木耳】北货郎优质木耳</text> -->
									<text class="h3 font-weight-bold">【{{GoodsDetail.Article_Name}}】</text>
								</view>
							</view>
							<view class="" style="width: 100%;">
								<view class="flex" style="height: 150rpx;">
									<view class="flex-shrink flex align-center" style="width: 15%; height: 100%;">
										<text class="font text-dark">价格</text>
									</view>
									<view class="flex align-center" style="width: 85%; height: 100%;">
										<text class="h2"
											:class="'text-'+ThemeColors">{{Specifications[Specification_num].Sales_Unit_Price }}元</text>
									</view>
								</view>
								<view class="flex" style="height: 70rpx;">
									<view class="flex-shrink flex align-center" style="width: 15%; height: 100%;">
										<text class="font text-dark">品牌名</text>
									</view>
									<view class="flex align-center" style="width: 85%; height: 100%;">
										<text class="font">{{GoodsDetail.Category_Name}}</text>
									</view>
								</view>
								<!-- <view class="flex" style="height: 70rpx;">
									<view class="flex-shrink flex align-center" style="width: 15%; height: 100%;">
										<text class="font text-dark">发货地址</text>
									</view>
									<view class="flex align-center" style="width: 85%; height: 100%;">
										<text class="font">黑龙江省哈尔滨市香坊区</text>
									</view>
								</view> -->
								<view class="flex" style="height: 70rpx;">
									<view class="flex-shrink flex align-center" style="width: 15%; height: 100%;">
										<text class="font text-dark">已售</text>
									</view>
									<view class="flex align-center" style="width: 85%; height: 100%;">
										<text class="font">{{GoodsDetail.Stock_Sell }}</text>
									</view>
								</view>
								<view class="flex mb-4" style="height: 70rpx;">
									<view class="flex-shrink flex align-center" style="width: 15%; height: 100%;">
										<text class="font text-dark">规格</text>
									</view>
									<view class="flex justify-between align-center border-bottom box border-grey"
										style="border-bottom-style:dashed; width: 85%; height: 100%;">
										<view @click="selectspeci(index)" style="border: 4rpx solid #000;"
											class="mr-2 mb-3"
											:class="(Specification_num==index?'text-white bg-'+ThemeColors:'')"
											v-for="(item,index) in Specifications" :key="index">
											<text>{{item.Specifications_Name}}</text>
										</view>
									</view>
								</view>
								<view class="flex mb-4" style="height: 80rpx;">
									<view class="flex-shrink flex align-center" style="width: 15%; height: 100%;">
										<text class="font text-dark">购买数量</text>
									</view>
									<view class="flex align-center" style="width: 85%; height: 100%;">
										<el-input-number v-model="Quantity"
											:max="Number(Specifications[Specification_num].Stock_Remain)"
											:min="1"></el-input-number>
										<text class="h2 ml-10"
											:class="'text-'+ThemeColors">{{Quantity*Number(Specifications[Specification_num].Sales_Unit_Price)}}元</text>
									</view>
								</view>
								<view class="flex mb-4" style="height: 80rpx;">
									<view class="flex-shrink flex align-center" style="width: 15%; height: 100%;">
										<text class="font text-dark">规格剩余库存</text>
									</view>
									<view class="flex align-center" style="width: 85%; height: 100%;">
										<text class="ml-10">{{Specifications[Specification_num].Stock_Remain}}</text>
									</view>
								</view>
							</view>
							<view class="" style="height: 200rpx;">
								<!-- 按钮 -->
								<view class="flex  mb-4" style="height: 80rpx;">
									<view class="flex-shrink" style="width: 15%; height: 100%;"></view>
									<view
										v-if="Specifications[0].Enterprise_Info_SerialNumber!=Enterprise_Info_SerialNumber"
										class="flex align-center" style="width: 85%; height: 100%;">
										<view @click="goOrder()"
											v-if="Number(Specifications[Specification_num].Stock_Remain!=0)"
											class="flex justify-center align-center mr-4" :class="'bg-'+ThemeColors"
											style="cursor: pointer; width: 350rpx; height: 100%;">
											<text class="font-md text-white">立即购买</text>
										</view>
										<view v-else class="flex justify-center align-center mr-4" :class="'bg-danger'"
											style="cursor: pointer; width: 350rpx; height: 100%;">
											<text class="font-md text-white">已售空</text>
										</view>
									</view>
									<view v-else class="flex justify-center align-center mr-4" :class="'bg-danger'"
										style="cursor: pointer; width: 350rpx; height: 100%;">
										<text class="font-md text-white">本企发布</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 详细信息 -->
				<view class="flex mt-4" style="width: 100%;">
					<!-- 左 -->
					<view class="flex-shrink " style="width:400rpx;">
						<!-- 店铺信息 -->
						<view class="flex bg-white mb-4 w-100 py-4" style="">
							<view class=" mx-4 w-100" style="height: 100%;">
								<!-- logo -->
								<view class="flex justify-center align-center">
									<view class="" style="width: 150rpx; height: 150rpx;">
										<image v-if="Specifications[Specification_num].Enterprise_Logo!=void 0" class="rounded-circle" style="width: 100%;height: 100%;"
											:src="Domain_Business + Specifications[Specification_num].Enterprise_Logo"
											mode=""></image>
									</view>
								</view>
								<!-- 企业名称 -->
								<view class="my-4 flex align-center">
									<view class="flex justify-center" style="width: 100%; height: 100%;">
										<text
											class="font text-center font-weight-bold">{{Specifications[Specification_num].Enterprise_Name}}</text>
									</view>
								</view>
								<!-- 按钮 -->
								<view
									v-if="Specifications[0].Enterprise_Info_SerialNumber!=Enterprise_Info_SerialNumber"
									@click="handleServer(true)" class="mb-2 border box flex justify-center align-center"
									:class="'border-'+ThemeColors+' text-'+ThemeColors"
									style="cursor: pointer; border-width: 5rpx; width: 100%; height: 70rpx;">
									<text class="font">联系对方</text>
								</view>
								<view
									@click="handleDetail(Specifications[Specification_num].Enterprise_Info_SerialNumber)"
									class="mb-4 flex justify-center align-center" :class="'bg-'+ThemeColors"
									style="cursor: pointer; width: 100%; height: 70rpx;">
									<text class="font text-white">溯源查看</text>
								</view>

							</view>
						</view>
					</view>
					<!-- 右 -->
					<view class="bg-white ml-4 " style="width: 100%;">
						<!-- 表头 -->
						<view class="flex border-bottom border-grey" style="height: 100rpx;">
							<view @click="ChangeTabs(index)" v-for="(item,index) in tabs" :key="index"
								class="border-top box flex justify-center align-center"
								:class="item.isClick?'border-'+ThemeColors:'border-white'"
								style="cursor:pointer; border-top-width: 5rpx; width: 250rpx;">
								<text class="font" :class="item.isClick?'text-'+ThemeColors:''">{{item.value}}</text>
							</view>
						</view>
						<!-- 类别 -->
						<!-- <view v-if="tabNum==0" class="flex">
							<view class="flex flex-wrap mx-10 py-4 border-bottom border-grey w-100"
								style="height: 100%;">
								<view v-for="(value,key) in {'货品状态':'带包','颜色':'黑','类别':'木耳','品种名':'秋木耳'}" :key="key"
									class="bl-blue flex align-center " style="width:33.3%; height: 100rpx;">
									<view class="" style="width: 30%;">
										<text class="font">{{key}}</text>
									</view>
									<view class="" style="width: 70%;">
										<text class="font">{{value}}</text>
									</view>
								</view>
							</view>
						</view> -->
						<!-- 详情图 -->
						<view v-if="tabNum==0" class="flex">
							<view class="flex flex-column mx-10 py-4 w-100" style="height: 100%;">
								<view v-for="item in GoodsDetail.Detail" :key="item.Article_PicNumber"
									style="width: 100%;">
									<image v-if="item.Picture_Url!=void 0" style="width: 100%;"
										:src="Domain_IMG + item.Picture_Url" mode="widthFix">
									</image>
								</view>
							</view>
						</view>
						<!-- 在线成交 -->
						<!-- <view v-if="tabNum==0||tabNum==1" class="w-100 py-4 flex" style="height: 1000rpx;">
							<view class="flex flex-column mx-4  w-100" style="height: 100%;">
								<view class="flex-shrink flex w-100 border-bottom box border-grey"
									style="height: 100rpx;">
									<view class="flex align-center" style="width: 20%;">
										<text class="font">采购商</text>
									</view>
									<view class="flex align-center" style="width: 30%;">
										<text class="font">货品规格</text>
									</view>
									<view class="flex align-center justify-end" style="width: 30%;">
										<text class="font">采购量</text>
									</view>
									<view class="flex align-center justify-end" style="width: 20%;">
										<text class="font">成交时间</text>
									</view>
								</view>
								<view class="flex flex-column w-100" style="height: 100%">
									<view v-for="(item, index) in Online_transaction_list" :key="index"
										class="flex w-100 mt-2" style="height: 10%">
										<view class="flex align-center" style="width: 20%">
											<text class="font">{{
								                        item.Buyer_Contact.substr(0, 1) +
								                        "*".repeat(item.Buyer_Contact.length - 1)
								                      }}</text>
										</view>
										<view class="flex align-center" style="width: 30%">
											<text class="font">{{ item.Enterprise_Name }}</text>
										</view>
										<view class="flex align-center justify-end" style="width: 30%">
											<text class="font">{{ item.Total_Quantity }}{{ item.Unit }}</text>
										</view>
										<view class="flex align-center justify-end" style="width: 20%">
											<text class="font">{{ item.Submission_Time }}</text>
										</view>
									</view>
								</view>
								<view class="flex-shrink flex justify-end w-100 " style="height: 100rpx;">
									<el-pagination background @size-change="handleSizeChange"
										@current-change="handleCurrentChange" :current-page="form.pageNum"
										:page-sizes="[5, 10, 15, 20]" :page-size="form.pageSize"
										layout="total, sizes, prev, pager, next, jumper" :total="limit">
									</el-pagination>
								</view>
							</view>
						</view> -->
						<view v-if="tabNum==1" class="flex">
							<view class="flex flex-column mx-10 py-4 w-100" style="height: 100%;">
								<TransactionDescription></TransactionDescription>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 移动端内容 -->
		<view v-else-if="screenWidth<=480" class="bg-grey pb-2">
			<!-- 轮播图 -->
			<view class="mb-2" style="position: relative;">
				<swiper id="swiper" :autoplay="true" :interval="3000" :duration="500" circular style="height: 700rpx;}"
					@change="changeIndicatorDots">
					<swiper-item v-for="item in Swiper" :key="item.Article_PicNumber">
						<image :src="Domain_IMG + item.Picture_URL" mode="sapectFill"
							style="width: 100%; height: 700rpx;"></image>
					</swiper-item>
				</swiper>
				<text class="font-sm px-2 text-white current" style="border-radius: 100rpx;">{{current}}</text>
			</view>
			<view class="bg-white rounded-lg mx-2 py-2 mb-2">
				<view class="mx-2">
					<text class="font" :class="'text-'+ThemeColors">￥</text>
					<text class="h2" :class="'text-'+ThemeColors">{{form.Amount}}</text>
					<text class="font mx-4">{{form.Starting_Quantity}}{{form.Unit}}起批</text>
				</view>
				<view class="mx-2 mb-2">
					<text class="font font-weight-bold">{{form.Article_Name}}</text>
				</view>
				<view class="mx-2 border-top border-grey">
					<text class="font-sm text-muted">已售出{{form.Sell_Quantity}}{{form.Unit}}</text>
				</view>
			</view>
			<!-- 发货地址 -->
			<view class="bg-white rounded-lg mx-2 py-2">
				<view class="mx-2">
					<text class="font" :class="'text-'+ThemeColors">￥</text>
					<text class="h2" :class="'text-'+ThemeColors">{{form.Amount}}</text>
					<text class="font mx-4">{{form.Amount}}</text>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<yFooter :screenWidth="screenWidth"></yFooter>
		<view v-if="isServer" class=" flex flex-column serve-mask bg-white shadow border position-relative"
			:class="'border-'+ThemeColors">
			<view class="flex-shrink shadow flex align-center border-bottom border-grey" style="height: 80rpx">
				<text class="px-2 font font-weight-bold border-left" :class="'border-'+ThemeColors"
					style="border-left-width: 8rpx;">企业名称</text>
				<text @click="handleServer(false)" class="font-sm text-muted"
					style="cursor: pointer; position: absolute; right:20rpx;">关闭</text>
			</view>
			<view class="flex flex-column mb-4" style="height: 100%;">
				<view class="w-100" style="height: 100%">
					<scroll-view :scroll-top="scrollTop" :scroll-with-animation="true" :scroll-y="true" id="msglistview"
						class="scroll-view" style="height: 100%;overflow-y: scroll;">
						<view class="chat-body">
							<view v-for="(item_,index) in msgList" :key="index">
								<view class="item self flex align-center" v-if="item_.userContent != ''">
									<view class="text-center">
										<text class="font-small">{{item_.time}}</text>
										<view class="content right">{{item_.userContent}}</view>
									</view>
									<view class="flex flex-column align-center">
										<image mode="widthFix" style="width: 70rpx;" class="avatar"
											src="../../static/icon/1.png">
										</image>
									</view>
								</view>
								<view class="item Ai" v-if="item_.botContent != ''">
									<view class="flex flex-column align-center">
										<image mode="widthFix" style="width: 70rpx;" class="avatar"
											src="../../static/icon/1.png">
										</image>
									</view>
									<view class="flex flex-column align-center ml-3">
										<text class="font-small">{{item_.time}}</text>
										<view class="content left">
											{{item_.botContent}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="shadow flex-shrink flex align-center bg-lightbrown w-100 border-top border-grey"
				style="height: 90rpx;position: absolute;bottom: -90rpx;">
				<textarea v-model="chatMsg" class="px-2 py-1 w-100" style=" height: 100%;"
					placeholder-class="font text-hover-light" placeholder="请输入您要说的话"></textarea>
				<view @click="handleSend()" class="hover mr-2 flex-shrink rounded-lg flex align-center justify-center"
					:class="'bg-'+ThemeColors" style="width: 100rpx;height: 80%;">
					<text class="font text-white">发送</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import yHeader from '@/components/yHeader.vue'
	import yFooter from '@/components/yFooter.vue'
	import TransactionDescription from '@/components/TransactionDescription.vue'
	import times from '@/static/js/utils.js'
	import {
		getGroupTransactionAll
	} from "@/api/purchasedgoods.js";
	import {
		Message
	} from 'element-ui'
	import {
		getGroupGoodsDetail,
		GroupServesHistory
	} from '@/api/group.js'
	export default {
		components: {
			yHeader,
			yFooter,
			TransactionDescription
		},
		data() {
			return {
				scrollTop: 0,
				is_open_socket: false, // 确保websocket是打开状态
				hearBeatInterval: null, //心跳
				msgList: [],
				screenWidth: uni.getSystemInfoSync().windowWidth,
				ThemeColors: app.globalData.ThemeColors,
				Domain_IMG: app.globalData.Domain_IMG,
				Domain_Business: app.globalData.Domain_Business,
				Specification_num: 0,
				Enterprise_Info_SerialNumber: '',
				current: '1/5',
				tabNum: 0,
				Quantity: 0,
				isServer: false,
				chatMsg: "",
				total: 0,
				tabs: [{
					value: '商品详情',
					isClick: true
				}, {
					value: '交易说明',
					isClick: false
				}],
				form: {
					Type: "1",
					page: 1,
					limit: 5,
					Enterprise_Info_SerialNumber: "",
					Group_Purchasing_SerialNumber: "",
				},
				limit: 0,
				Online_transaction_list: [],
				Show: true,
				Data: {},
				Detail: [],
				Swiper: [],
				Payment: [],
				Shipment: [],
				picNum: 0,
				Store_SerialNumber: '',
				Article_SerialNumber: '',
				Sales_Unit_Price_SerialNumber: "",
				GoodsDetail: {},
				Specifications: [{
					Sales_Unit_Price: ''
				}]
			}
		},
		onLoad() {
			this.Enterprise_Info_SerialNumber = uni.getStorageSync('loginInfo').enterprise
			this.Sales_Unit_Price_SerialNumber = sessionStorage.getItem("Sales_Unit_Price_SerialNumber")
			this.Store_SerialNumber = sessionStorage.getItem("Store_SerialNumber")
			this.Article_SerialNumber = sessionStorage.getItem("Article_SerialNumber")
			this.getshowList(this.Article_SerialNumber, this.Sales_Unit_Price_SerialNumber)
			this.getGroupTransactionAllmethod(this.form);
		},
		methods: {
			changeIndicatorDots(e) { //每次轮播修改轮播图数--1/4
				this.current = (e.detail.current + 1) + '/' + this.Swiper.length
			},
			async getGroupTransactionAllmethod(form) {
				const res = await getGroupTransactionAll({
					data: form,
				});
				this.limit = parseInt(res.limit);
				this.Online_transaction_list = res.tableData;
				// console.log(res);
			},
			handleCurrentChange(val) {
				this.form.page = val;
				this.getGroupSeekTransactionAllmethod();
			},
			handleSizeChange(val) {
				this.form.limit = val;
				this.getGroupSeekTransactionAllmethod();
			},
			async getshowList(Article_SerialNumber, Sales_Unit_Price_SerialNumber) {
				const res = await getGroupGoodsDetail({
					data: {
						Article_SerialNumber,
						Sales_Unit_Price_SerialNumber,
					}
				})
				console.log(res)
				if (res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else if (res.Status == 'success') {
					this.GoodsDetail = res.Data
					this.Specifications = res.Data.specifications
					console.log(this.Specifications);
				}
			},
			handleTabs(url) {
				uni.navigateTo({
					url
				})
			},
			handleDetail(row) { //溯源查看

				uni.navigateTo({
					url: '/pages/detail/enterprise-detail?id=' + row
				})
			},
			handleSwiper(i) {
				this.picNum = i
			},
			handleSizeChange() {

			},
			handleCurrentChange() {

			},
			ChangeTabs(index) {
				this.tabs.forEach(item => {
					item.isClick = false
				})
				this.tabs[index].isClick = true
				this.tabNum = index
			},
			goOrder() {
				if (uni.getStorageSync('loginInfo') == '') {
					Message({
						type: 'warning',
						message: '登录后可享受全部服务'
					})
					let time = setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						clearTimeout(time)
					}, 2000)
					return
				}
				uni.setStorageSync('GoodsDetail',this.GoodsDetail)
				uni.setStorageSync('Quantity',this.Quantity)
				uni.setStorageSync('Goodsprice',this.Specifications[this.Specification_num].Sales_Unit_Price)
				uni.navigateTo({
					url: '/pages/order/goodsOrder?Store_SerialNumber='+this.Store_SerialNumber+'&Article_SerialNumber='+this.Article_SerialNumber+'&Article_Specifications_SerialNumber='+this.Specifications[this.Specification_num].Article_Specifications_SerialNumber+'&Sales_Unit_Price_Stock_SerialNumber='+this.Specifications[this.Specification_num].Sales_Unit_Price_Stock_SerialNumber
				})
			},
			//获取消息历史记录
			async getHistoryList(data) {
				const res = await GroupServesHistory({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else if (res.Status == 'success') {
					console.log(res);
					this.msgList = res.Data
					this.ScrollBottom()
				}
			},
			//发送的消息添加到消息记录
			async MessagesFileAdd(data) {
				const res = await GoodsFileAdd({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					console.log(res.redirect);
				} else if (res.Status == 'success') {
					console.log(res);
				}
			},
			//websocket
			connectSocketInit() {
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					url: app.globalData.Domain_Socket + "/websocket?userId=Group" + this.usePhone,
					success(data) {
						console.log("websocket连接成功");
					},
				});
				// // 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					this.hearBeatInterval = setInterval(() => {
						this.socketTask.send({
							data: 'ping',
						});
					}, 5000)
					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						console.log(JSON.parse(res.data))
						let time = JSON.parse(res.data).data.time
						let message = JSON.parse(res.data).data.message
						this.msgList.push({
							botContent: message,
							userContent: "",
							time,
						});
					});
				})
				// // 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					this.is_open_socket = false;
					clearInterval(this.hearBeatInterval)
					console.log("已经被关闭了")
				})
			},
			//发送消息
			handleSend() {
				//如果消息不为空
				this.scrollToBottom()
				if (!this.chatMsg || !/^\s+$/.test(this.chatMsg)) {
					let time = times.nowtime();
					let obj = {
						botContent: "",
						userContent: this.chatMsg,
						time: times.nowtime()
					}
					this.msgList.push(obj);
					if (this.is_open_socket && this.chatMsg != "") {
						console.log(1);
						this.socketTask.send({
							data: JSON.stringify({
								time,
								message: this.chatMsg,
								userId: this.Enterprise_Info_SerialNumber,
							}),
							async success() {
								console.log("消息发送成功");
							},
						});
						this.setMessage(this.usePhone, this.chatMsg, time)
					}
					this.chatMsg = ''
				} else {
					uni.showToast({
						title: '不能发空消息哦',
						icon: 'error'
					})
				}
			},
			//滚动到消息底部
			ScrollBottom(i = 0) {
				console.log('滚动了')
				// this.scrollTop = (124-48)*i
				this.$nextTick(() => {
					this.scrollTop = 10000 + i * 10
				})
			},
			handleServer(boolen) {
				if (uni.getStorageSync('loginInfo') == '') {
					Message({
						type: 'warning',
						message: '登录后可享受全部服务'
					})
					let time = setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						clearTimeout(time)
					}, 2000)
					return
				}
				this.isServer = boolen
				if (boolen) {
					this.connectSocketInit()
					let data = {
						Group_ID: uni.getStorageSync('loginInfo').use,
						User_Type: 'custom',
						Enterprise_Info_SerialNumber: this.form.Enterprise_Info_SerialNumber,
					}
					this.getHistoryList(data)
				} else {
					this.socketTask.onClose(() => {
						this.is_open_socket = false;
						clearInterval(this.hearBeatInterval)
						console.log("已经被关闭了")
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.box {
		box-sizing: border-box;
	}

	.border-button {
		border-width: 8rpx;
		border-style: solid;
		box-sizing: border-box;
	}

	.current {
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		bottom: 50rpx;
		right: 25rpx;
		justify-content: space-around;
	}

	.serve-mask {
		position: fixed;
		right: 0;
		bottom: 90rpx;
		z-index: 1030;
		width: 800rpx;
		height: 40%;
	}

	.hover:hover {
		cursor: pointer;
	}

	$chatContentbgc: #C2DCFF;
	$sendBtnbgc: #4F7DF5;

	.scroll-view {
		// background-color: orange;
		background-color: #F6F6F6;

		.chat-body {
			display: flex;
			flex-direction: column;
			padding-top: 23rpx;
			// background-color:skyblue;

			.self {
				justify-content: flex-end;
			}

			.item {
				display: flex;
				padding: 23rpx 30rpx;
				// background-color: greenyellow;

				.right {
					background-color: $chatContentbgc;
				}

				.left {
					background-color: #FFFFFF;
				}

				// 聊天消息的三角形
				.right::after {
					position: absolute;
					display: inline-block;
					content: '';
					width: 0;
					height: 0;
					left: 100%;
					top: 10px;
					border: 12rpx solid transparent;
					border-left: 12rpx solid $chatContentbgc;
				}

				.left::after {
					position: absolute;
					display: inline-block;
					content: '';
					width: 0;
					height: 0;
					top: 10px;
					right: 100%;
					border: 12rpx solid transparent;
					border-right: 12rpx solid #FFFFFF;
				}

				.content {
					position: relative;
					max-width: 486rpx;
					border-radius: 8rpx;
					word-wrap: break-word;
					padding: 24rpx 24rpx;
					margin: 0 24rpx;
					border-radius: 5px;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
				}

				.avatar {
					display: flex;
					justify-content: center;
					width: 78rpx;
					height: 78rpx;
					border-radius: 50rpx;
					overflow: hidden;

					image {
						align-self: center;
					}

				}
			}
		}
	}

	.a::-webkit-scrollbar {
		display: none;
	}
</style>